<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { updateHouseholderCarService } from '@/api/householder.js'
import { useRouter } from 'vue-router'

const licensePlate = ref({
  householderCard: '',
  carLicensePlate: ''
})

// 用于清除表单数据
const clearForm = () => {
  licensePlate.value.householderCard = ''
  licensePlate.value.carLicensePlate = ''

}
const rules = {
  householderCard: [
    { required: true, message: '请输入身份证号码', trigger: 'blur' },
    {
      pattern: /^\d{6}(19|20)\d{2}(0[1-9]|1[012])(0[1-9]|[12][0-9]|3[01])\d{3}(\d|X|x)$/,
      message: '请输入正确的身份证号码！',
      trigger: 'blur'
    }
  ],
  carLicensePlate: [
    { required: true, message: '请输入车牌号', trigger: 'blur' },
    {
      pattern: /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[\dA-HJ-NP-Za-hj-np-z]{4,6}$/,
      message: '请输入正确的车牌号！',
      trigger: 'blur'
    }
  ],
}

const router = useRouter()
const updateHouseholderCar = async () => {
  try {
    let result = await updateHouseholderCarService(licensePlate.value);
    if (result.code === 200) {
      ElMessage.success('住户车牌录入成功!');
      router.push('/user/householderManage');
    } else {
      ElMessage.error('操作失败!');
      clearForm();
    }
  } catch (error) {
    clearForm();
  }
}

</script>
<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>车牌录入</span>
      </div>
    </template>
    <el-row>
      <el-col :span="12">
        <el-form :model="licensePlate" :rules="rules" label-width="100px" size="large">
          <el-form-item label="身份证号码" prop="householderCard">
            <el-input type="text" v-model="licensePlate.householderCard"></el-input>
          </el-form-item>
          <el-form-item label="车牌号" prop="carLicensePlate">
            <el-input type="text" v-model="licensePlate.carLicensePlate"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="updateHouseholderCar">提交修改</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </el-card>
</template>

<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>